import { FC } from 'react';
import { Form, Input, Modal, FormInstance } from '@supcon/supcon-5t-design';
import { ModalStateType } from './hook';
import type { SetState } from 'ahooks/es/useSetState';
import styles from './index.module.less';

export interface ModalProps {
  open: boolean;
  form: FormInstance;
  modalState: ModalStateType;
  setModalState: SetState<ModalStateType>;
  onCancel: () => void;
  onOk: () => void;
}

const AddEditModal: FC<ModalProps> = ({
  open,
  form,
  modalState,
  setModalState,
  onCancel,
  onOk,
}) => {
  return (
    <Modal
      className={styles['add_edit_modal']}
      title={modalState?.info ? '编辑' : '新增'}
      open={open}
      onOk={onOk}
      onCancel={onCancel}
    >
      <Form form={form}>
        <Form.Item
          name="name"
          rules={[{
            required: true,
            message: '请输入名称'
          }]}>
          <Input placeholder="请输入名称"></Input>
        </Form.Item>
        <Form.Item
          name="age"
          rules={[{
            required: true,
            message: '请输入年龄'
          }]}>
          <Input placeholder="请输入年龄" type="number"></Input>
        </Form.Item>
        <Form.Item
          name="address"
          rules={[{
            required: true,
            message: '请输入地址'
          }]}>
          <Input placeholder="请输入地址"></Input>
        </Form.Item>
      </Form>
    </Modal >
  );
};
export default AddEditModal;
